<template>
  <div>
    <!--对话框-->
    <transition name="chat-icon">
      <div v-show="isIconShow" class="chat-icon flex-col jc-center">
        <communication @click="showChat()" class=" cursor-pointer" theme="outline" size="41" fill="#99ce8e"
                       :strokeWidth="3"
                       strokeLinejoin="bevel"
                       strokeLinecap="square"/>
        <span class="title">小帮手</span>
      </div>
    </transition>

    <transition name="fade">
      <el-row v-show="isChatShow" class="chat" :gutter="16">
        <!--对话框头部-->
        <el-row style="height: 8%;min-height:50px;background-color:#09e8cc; padding: 0 10px " type="flex"
                justify="space-between"
                align="middle">
          <cool theme="outline" size="27" fill="#99ce8e" :strokeWidth="3" strokeLinejoin="bevel"
                strokeLinecap="square"/>
          <span>小诗</span>
          <close @click="showChat()" class="cursor-pointer" theme="outline" size="27" fill="#99ce8e" :strokeWidth="3"
                 strokeLinejoin="bevel"
                 strokeLinecap="square"/>
        </el-row>
        <!--对话框主体-->
        <el-row class="body-container" id="bodyContainer" type="flex" justify="right" align="top">
          <el-col :span="24" style="overflow: hidden">
            <el-row class="margin-tb-10" v-for="(item,index) in chatContent" :key="index" type="flex"
                    :justify="item.type=='robot'?'start':'flex-end'"
                    :style="{'flex-direction':item.type=='robot'?'row':'row-reverse',}"
                    align="middle">
              <el-avatar
                  class="avatar"
                  :src="require(item.type=='robot'?'@/assets/img/chatAvatar/robot.jpg':'@/assets/img/chatAvatar/client.jpg')"/>
              <el-row class="content">
                <div v-html="item.content"></div>
              </el-row>
            </el-row>
          </el-col>
        </el-row>
        <!--对话框发送框-->
        <el-row
            style="height: 8%;min-height:50px;background-color:#7a0ae0; padding: 0 10px " type="flex"
            justify="start"
            align="middle">
          <el-input
              placeholder="请输入内容"
              v-model="keyword"
              @keydown.native.enter="askQuestion"
          >
          </el-input>
          <send @click="askQuestion" class="cursor-pointer" theme="outline" size="27" fill="#99ce8e" :strokeWidth="3"
                strokeLinejoin="bevel"
                strokeLinecap="square"/>
        </el-row>
      </el-row>
    </transition>
  </div>

</template>

<script>
import {Communication, Close, Cool, Send} from '@icon-park/vue'
import {reqTalkRobot} from '@/API/modules/robot'
import {Message} from 'element-ui'

export default {
  name: "Chat",
  data() {
    return {
      isIconShow: false,
      isChatShow: false,
      keyword: '',
      chatContent: [
        {
          type: 'robot',
          content: `我是机器人小诗，我建议这么和我说话：<br/>1.搜索诗人苏轼
<br/>2.搜索诗词水调歌头
<br/>3.搜索诗人苏轼的简介
<br/>4.搜索诗词水调歌头的简介
<br/>5.你是谁
<br/>6./add -q 你要问的问题 -a 让他说的回答`
        }, {
          type: 'client',
          content: '该说什么好呢？'
        },
      ],

    }
  },
  components: {
    Communication,
    Close,
    Cool,
    Send
  },
  methods: {
    async talkRobot(question) {
      let result = await reqTalkRobot(question)
      if (result.status == 200) {
        this.chatContent.push({type: 'robot', content: result.data.data})
        this.keyword = '';
        let bodyContainer = document.getElementById('bodyContainer');
        setTimeout(function () {
          bodyContainer.scrollTop = bodyContainer.scrollHeight;
        }, 20)
      }
    },
    showChat() {
      this.isChatShow = !this.isChatShow
    },
    askQuestion() {
      if (this.keyword == '') {
        Message.error('你还什么都没说呢')
        return
      }
      this.chatContent.push({type: 'client', content: this.keyword})
      this.talkRobot(this.keyword)
    }
  },
  mounted() {
    this.isIconShow = true
  }

}
</script>

<style lang="scss" scoped>
.chat {
  width: 25%;
  height: 80%;
  background-color: #cb3e3e;
  position: fixed;
  right: 5px;
  top: 100px;
  z-index: 999;
  transition: display .1s .1s;


  .body-container {
    height: 84%;
    background-color: #fff;
    padding: 10px;
    overflow-y: scroll;
    overflow-x: hidden;

    .avatar {
      margin-right: 5px;
    }

    .content {
      background-color: #f68484;
      border-radius: 18px;
      padding: 8px 12px;
      max-width: 83%;
      text-align: left
    }
  }

}

.chat-icon {
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
  position: fixed;
  transition: right .1s .1s;
  right: 0px;
  bottom: 40%;

  .title {
    width: 36px;
    font-size: 12px;
    font-weight: bold;
    color: #ac70a4;
  }

}

.chat-icon-enter-active {
  transition: all .5s cubic-bezier(0.1, 0.5, 0.8, 1.0);

}

.chat-icon-leave-active {
  transition: all .3s ease;
}

.chat-icon-enter, .slide-fade-leave-to {
  transform: translateX(83px);
  opacity: 0;
}

.fade-enter-active, {
  transition: opacity .2s .2s;
}

.fade-leave-active {
  transition: opacity .2s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
{
  opacity: 0;
}

::v-deep .el-input__inner {
  //background-color: transparent;
  height: 28px;
  border: 0;
}

</style>